<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.30/vue.global.min.js" type="application/javascript"></script>
</head>
<body>
  
    <div id="app">

         userInfo : {{ userInfo}}
         <button @click="setAge"> 修改用户的年龄</button>
    </div>

        
    
    <script>
      
           const { ref , reactive} = Vue;
           const app = Vue.createApp({  //  vue2 new Vue({})
               
                setup(){

                    // 处理at的业务

                    const at = ref(100); // ref(初始值) 创建一个ref对象(响应式的数据)
                    // 如果需要读取或者修改at的值 都需要通过它的value属性
                    const increAt = ()=>{
                        at.value = at.value + 10
                    }

                    // 处理at的业务 end

                    // const userInfo = ref({
                    //     name:'dixon',
                    //     age:17
                    // })
                    // const setAge = ()=>{
                    //     userInfo.value.age++ 
                    // }

                    // 使用reactive 可以创建reative对象 一般使用在引用数据类型上面
                    // reactive的对象 可以对于属性进行直接的修改 
                    // 一般而言(非必须) 如果我们创建的是一个引用数据类型的数据 建议采用 reactive

                    const userInfo = reactive({
                        name:'dixon',
                        age:17
                    })

                    const setAge = ()=>{
                        userInfo.age++ 
                    }

                    // setup 返回的对象 就会挂载在实例上
                    return {
                        at,
                        increAt,
                        userInfo,
                        setAge
                    }
                }
           })

           app.mount('#app') //  vue2  app.$mount()
        

    </script>

</body>
</html>